Vue.jsとCustom Elementsの関係性について

ネタ出し

実際の使用例

https://gyazo.com/51a182f6b9bf3c266eaa65d41434b1b2

https://gyazo.com/474e1423dc198e6fc5805c9349688c20

使うためには設定をいれる必要がある

app.config.compilerOptions.isCustomElement = (tag) => tag.includes('-')

code:vite.config.js

export default {

plugins: [

vue({

template: {

compilerOptions: {

isCustomElement: (tag) => tag.includes('-')

}

}

})

]

}

code:ts

import { defineCustomElement } from 'vue';

import Example from './Example.ce.vue';

// カスタム要素のコンストラクタに変換

const ExampleElement = defineCustomElement(Example);

// 登録

customElements.define('my-example', ExampleElement);

code:ts

import MyElement from './MyElement.ce.vue';

defineCustomElements(MyElement, {

shadowRoot: false,

nonce: 'xxx',

configureApp(app) {

app.config.errorHandler = ...

}

});

ネストされたコンポーネントのスタイルをshadow rootに継承させる

code:ts

import { defineCustomElement } from 'vue'

import Root from './Root.ce.vue'

customElements.define('my-el', defineCustomElement(Root))

code:html

<!-- Root.ce.vue -->

<script setup>

import Child from './Child.ce.vue'

</script>

code:html

<!-- Child.ce.vue -->

<style>

div { color: red }; /* will be injected to Root.ce.vue's shadow root */

</style>

最初のイベント引数がオブジェクトである場合、それはCustomEventのオプションオブジェクトとして使用される

code:js

emit('event', { bubbles: true })

今残ってるIssue

code:html

<template>

<slot name="root">Replace me</slot>

</div>

</template>

事例